<script setup lang="ts">
import { ref } from "vue";
import { FormProps } from "./utils/types";
import { useForm } from "./utils/form";
import ReCol from "@/components/ReCol";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    id: "",
    name: "",
    paperid: "",
    paperName: "",
    starttime: "",
    endtime: "",
    description: "",
    taskZt: 1,
    paperTimes: 0,
    paperScore: 0
  })
});
const {
  constraints,
  isStartExamRef,
  studentColumns,
  setFormInlineToTsx,
  answerSheetList,
  onStartExam,
  onStopExam,
  formExamRef,
  formExamData,
  onPreQuestion,
  onNextQuestion,
  currentAnswerRef,
  currentAnswerIdRef,
  onAnswerChange,
  showTime,
  showIdRef,
  showMumber,
  answerSheetList0,
  answerSheetList1,
  answerSheetList2,
  answerSheetList3
} = useForm();

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);
setFormInlineToTsx(newFormInline.value);

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });

function changeStyle(item, showId) {
  const index = answerSheetList.value.indexOf(item);
  currentAnswerRef.value = index;
  showIdRef.value = showMumber(showId);
}

function formatTime(seconds) {
  const minutes = Math.floor(seconds / 60);
  const remainingSeconds = seconds % 60;

  const formattedMinutes = ("0" + minutes).slice(-2);
  const formattedSeconds = ("0" + remainingSeconds).slice(-2);

  return formattedMinutes + ":" + formattedSeconds;
}

//去除富文本中的p标签
function delHtmlTag(str) {
  return str.replace(/<(\/)?p>/g, "");
}
</script>
<template>
  <el-row :gutter="30" class="no-copy">
    <re-col :value="6" :xs="24" :sm="24">
      <el-card>
        <template #header>
          <div class="w-full flex justify-center">
            <h3>答题卡</h3>
          </div>
        </template>
        <div
          class="w-full flex justify-start"
          v-if="answerSheetList0.length > 0"
        >
          <h3>判断题：</h3>
        </div>
        <el-space
          style="padding-bottom: 8px"
          v-for="(item, index) in answerSheetList0"
          :key="index"
        >
          <el-button
            :type="
              currentAnswerIdRef == item.id
                ? 'danger'
                : 'answer' in item
                ? 'info'
                : ''
            "
            @click="changeStyle(item, index)"
            :disabled="!isStartExamRef"
            style="line-height: 1.5"
          >
            {{ showMumber(index) }}
          </el-button>
        </el-space>
        <div
          class="w-full flex justify-start"
          v-if="answerSheetList1.length > 0"
        >
          <h3>单选题：</h3>
        </div>
        <el-space
          style="padding-bottom: 8px"
          v-for="(item, index) in answerSheetList1"
          :key="index"
        >
          <el-button
            :type="
              currentAnswerIdRef == item.id
                ? 'danger'
                : 'answer' in item
                ? 'info'
                : ''
            "
            @click="changeStyle(item, index)"
            :disabled="!isStartExamRef"
            style="line-height: 1.5"
          >
            {{ showMumber(index) }}
          </el-button>
        </el-space>
        <div
          class="w-full flex justify-start"
          v-if="answerSheetList2.length > 0"
        >
          <h3>多选题：</h3>
        </div>
        <el-space
          style="padding-bottom: 8px"
          v-for="(item, index) in answerSheetList2"
          :key="index"
        >
          <el-button
            :type="
              currentAnswerIdRef == item.id
                ? 'danger'
                : 'answer' in item
                ? 'info'
                : ''
            "
            @click="changeStyle(item, index)"
            :disabled="!isStartExamRef"
            style="line-height: 1.5"
          >
            {{ showMumber(index) }}
          </el-button>
        </el-space>
        <div
          class="w-full flex justify-start"
          v-if="answerSheetList3.length > 0"
        >
          <h3>案例分析：</h3>
        </div>
        <el-space
          style="padding-bottom: 8px"
          v-for="(item, index) in answerSheetList3"
          :key="index"
        >
          <el-button
            :type="
              currentAnswerIdRef == item.id
                ? 'danger'
                : 'answer' in item
                ? 'info'
                : ''
            "
            @click="changeStyle(item, index)"
            :disabled="!isStartExamRef"
            style="line-height: 1.5"
          >
            {{ showMumber(index) }}
          </el-button>
        </el-space>
      </el-card>
    </re-col>
    <re-col :value="12" :xs="24" :sm="24">
      <el-card>
        <template #header>
          <PureDescriptions title="" :columns="studentColumns" />
          <div class="w-full flex justify-between" v-if="isStartExamRef">
            <el-button type="info" size="large" @click="onPreQuestion"
              >上一题</el-button
            >
            <el-button type="info" size="large" @click="onNextQuestion"
              >下一题</el-button
            >
          </div>
        </template>
        <div style="height: 65vh; overflow-x: hidden; overflow-y: auto">
          <el-card v-if="!isStartExamRef">
            <template #header>
              <h2>考试说明</h2>
            </template>
            <div class="display-text">
              {{ newFormInline.description }}
            </div>
          </el-card>

          <el-form
            ref="formExamRef"
            :model="formExamData"
            v-if="isStartExamRef"
          >
            <el-form-item
              style="font-weight: bold"
              v-if="formExamData.type == 0"
              >(判断题)**<span
                >第{{ showIdRef }}题({{ formExamData.score }}分)：</span
              ></el-form-item
            >
            <el-form-item
              style="font-weight: bold"
              v-if="formExamData.type == 1"
              >(单选题)**<span
                >第{{ showIdRef }}题({{ formExamData.score }}分)：</span
              ></el-form-item
            >
            <el-form-item
              style="font-weight: bold"
              v-if="formExamData.type == 2"
              >(多选题)**<span
                >第{{ showIdRef }}题({{ formExamData.score }}分)：</span
              ></el-form-item
            >
            <el-form-item
              style="font-weight: bold"
              v-if="formExamData.type == 3"
              >(案例分析)**<span
                >第{{ showIdRef }}题({{ formExamData.score }}分)：</span
              ></el-form-item
            >
            <el-form-item>
              <span v-html="formExamData.title" />
            </el-form-item>
            <el-form-item v-if="formExamData.childTitle">
              <span>（{{ formExamData.childIndex }}）</span>
              <span v-html="formExamData.childTitle" />
            </el-form-item>
            <el-form-item>
              <el-radio-group
                v-model="formExamData.answer"
                @change="onAnswerChange"
                v-if="formExamData.type == 0 || formExamData.childType == 0"
              >
                <el-radio :label="1">正确</el-radio>
                <el-radio :label="0">错误</el-radio>
              </el-radio-group>
              <el-radio-group
                v-model="formExamData.answer"
                @change="onAnswerChange"
                v-if="formExamData.type == 1 || formExamData.childType == 1"
              >
                <el-row :gutter="30">
                  <re-col
                    :value="24"
                    :xs="24"
                    :sm="24"
                    class="el-col-padding"
                    v-for="(item, index) in formExamData.choiceList"
                    :key="index"
                  >
                    <el-radio :label="item.name"
                      >{{ item.name }}、<span
                        v-html="delHtmlTag(item.content)"
                      />
                    </el-radio>
                  </re-col>
                </el-row>
              </el-radio-group>
              <el-checkbox-group
                v-model="formExamData.answer"
                @change="onAnswerChange"
                v-if="formExamData.type == 2 || formExamData.childType == 2"
              >
                <el-row :gutter="30">
                  <re-col
                    :value="24"
                    :xs="24"
                    :sm="24"
                    class="el-col-padding"
                    v-for="(item, index) in formExamData.choiceList"
                    :key="index"
                  >
                    <el-checkbox :label="item.name"
                      >{{ item.name }}、<span v-html="delHtmlTag(item.content)"
                    /></el-checkbox>
                  </re-col>
                </el-row>
              </el-checkbox-group>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </re-col>
    <re-col :value="6" :xs="24" :sm="24">
      <el-card>
        <template #header>
          <div class="flex flex-row justify-between">
            <h3>
              剩余时间：<span :style="showTime < 300 ? 'color: red' : ''">{{
                formatTime(showTime)
              }}</span>
            </h3>
            <el-button
              type="success"
              size="large"
              @click="onStartExam"
              v-if="!isStartExamRef"
              >开始答题</el-button
            >
            <el-button
              type="danger"
              size="large"
              @click="onStopExam"
              v-if="isStartExamRef"
              >交卷</el-button
            >
          </div>
        </template>
        <div class="w-full flex justify-center">
          <video
            id="videoCamera"
            :width="constraints.video.width"
            :height="constraints.video.height"
            autoplay
          />
        </div>
        <div class="w-full flex justify-center">
          <h2 style="color: red">请务必将摄像头</h2>
        </div>
        <div class="w-full flex justify-center">
          <h2 style="color: red">对准人脸</h2>
        </div>
        <div class="w-full flex justify-center">
          <h2 style="color: red">否则成绩无效</h2>
        </div>
      </el-card>
    </re-col>
  </el-row>
</template>

<style scoped lang="scss">
.vertical-radio-group .el-radio {
  display: block;
}

.no-copy {
  /* 火狐 */

  /* 谷歌/ Safari */

  /* IE10+ */
  user-select: none; /* 标准语法 */
}

.display-text {
  white-space: pre-wrap;
}

:deep(.el-radio__label) {
  width: 100% !important;
  line-height: 18px;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: normal;
}

:deep(.el-checkbox__label) {
  display: inline-block;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: normal;
  vertical-align: middle;
}

.el-col-padding {
  padding-bottom: 20px;
}
</style>
